<template>
  <div>
    <div>
        <ComHeader title="推广二维码" leftArrow='true' />
        <div style="position: absolute;right: 15px;top: 10px;z-index: 10000;" @click="shuaxin">
            <img src="static/img/shuaxin.png" style="width: 30px;height:30px;">
        </div>
    </div>
      <div class="container">
        <div class="qrcode-main">
          <img class="max"  alt="" :src="wx_png" @load="showImg">
        </div>
        <div class="wrap">
          <div class="main">
            <div class="avatar">
              <!-- <div class="animated jackInTheBox">
                <img :src="userInfo.headimgurl" v-if="isImgLoad"  class="iconStyle">
              </div> -->
            </div>
          </div>
        </div>
      </div>
    <div>
    </div>
  </div>
</template>

<script>
import ComHeader from '@/common/ComHeader'
import { Indicator  } from 'mint-ui';
import api from "@/fetch/api"
export default {
  name:"Mycontainer",
  components: {
    ComHeader,
    Indicator
  },
  data() {
    return {
      data: null,           // 获取数据
      userInfo: null,       // 用户信息
      wx_png: '',           // 二维码地址
      isImgLoad: false      // 图片是否加载完成
    }
  },
  created() {
    // 获取缓存的用户信息
    var ethelWxUserInfo = this.getlocalStorage(this.companyUnique);
    if(ethelWxUserInfo){
        this.userInfo = ethelWxUserInfo
    // 没用户时
    }else{
      this.userInfo = {
        nickname: 'chen',
        headimgurl: 'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJicOCm5pTDEhtk4TLA3EszTOzbUDNTicCgcIgs0080ciaXEQrp2Vdib3DrnpRUPDwbrqoNmVP3iaqwoeg/132',
        level: '会员'
      }
    }
    Indicator.open({
      text: '加载中...',
      spinnerType: 'fading-circle'
    });
    this.getWxerweima() 
  },
  methods: {
    // 刷新功能
    shuaxin(){
      // 删除二维码
      api.updataewm({'openid': this.getOpenID()})
      .catch(res => {
        this.wx_png = ''
         // 重新获取
        this.getWxerweima() 
      })
    },

    // 图片是否加载完
    showImg(event) {
      if(event.target.complete) {
        this.isImgLoad = true
      }
    },

    // 获取二维码
    getWxerweima() {
      api.getWxerweima({'openid': this.getOpenID()}).then(res => {
        this.print(res.data);
        Indicator.close();
      }).catch(res => {
        this.print(res);
        if(res.data.status !== '401'){
          this.wx_png = res.data.wx_png
          if(!this.isImage(this.wx_png)) {
            
            //this.$router.push("/entry/register"); 
          }  
          setTimeout(() => {
            Indicator.close();
          },1000)
        }
      })
    },

    /**
     * @desc 判断当前是否是图片
     * @param {String} img 当前传递的是否是图片
     */
    isImage(img) {
       var strFilter = ".jpeg|.gif|.jpg|.png|.bmp|.pic|"
        if(img.indexOf(".")>-1)
          {
              var p = img.lastIndexOf(".");
              var strPostfix=img.substring(p,img.length) + '|';        
              strPostfix = strPostfix.toLowerCase();
              if(strFilter.indexOf(strPostfix)>-1)
              {
                  return true;
              }
          }        
        return false;    
    }
  }
 
}
</script>
<!-- http://api.sailafeinav.com/user/v1/wxcode/ -->

<style lang="stylus" scoped>
.qrcode-main{
  width: 100%;
  height: 100%;
  padding-top: 1.45rem;
}
.iconStyle {
  border-radius:50%
}
.qrcode-main>img {
  width:100%;
  height 100%;
}
.container{
  position: relative;
}
.wrap{
  position: absolute;
  width: 100%;
  top: 6rem;
  left: 0;
  text-align: center;
  z-index: 2;
  .avatar{
    overflow: hidden;
    margin: 0 auto;
  }
  .texts{
    margin-top: .3rem;
    p{
      line-height: .7rem;
      font-size: .42rem;
    }
  }
  .qrcdoe{
    margin-top: 2.8rem;
  }
}
</style>
